<template>
  <div class="scenic_mapBox">
    <div class="map_title">
      <div class="back_box">
        <img @click="back"
          src="../assets/img/返回.png"
          alt="返回按钮"
          style="margin-right: 5px; border-right: 1px solid #929292"
        />
        <img @click="jump('/home')" src="../assets/img/homes (1).png" alt="主页按钮" />
      </div>
      <p>景区地图</p>
    </div>

    <!-- 标题列表 -->
    <div class="localList">
      <div class="localtionName">
        <div
          v-for="(item, index) in localItems"
          :key="index"
          class="local_items"
          :style="{ color: activeLocalIndex === index ? '#2a82e4' : '' }"
          @click="selectLocal(index)"
        >
          <p>{{ item.name }}</p>
          <span v-if="activeLocalIndex === index"></span>
        </div>
      </div>

      <img src="../assets/img/more1.png" alt="更多选项" @click="showMore" />
    </div>
    <div class="Alllocals" v-if="isShow">
      <div class="Alllocals_title">
        <p>全部</p>
        <img src="../assets/img/error.png" alt="关闭" @click="showMore" />
      </div>

      <div class="localsItems">
        <div>
          <img src="../assets/img/scenic.png" alt="" />
          景点
        </div>
        <div>
          <img src="../assets/img/rest.png" alt="" />
          休息点
        </div>
        <div>
          <img src="../assets/img/parking-fill.png" alt="" />
          停车场
        </div>
        <div>
          <img src="../assets/img/wc.png" alt="" />
          卫生间
        </div>
      </div>
    </div>

    <div id="maps"></div>
  </div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { ref, onMounted } from "vue";
import {useRouter} from 'vue-router'
import {index} from '../api/map';

const map = ref(null);
const driving = ref(null);
const routeDistance = ref(0);
const routeTime = ref(0);
const isShow = ref(false);
const activeLocalIndex = ref(0); // 默认选中第一个本地项目
const router=useRouter()

const jump=(url)=>{
  router.push(url);
}
const back=()=>{
  router.back()

}


// 本地项目数据
const localItems = ref([
  { name: "景区" },
  { name: "休息点" },
  { name: "停车场" },
  { name: "卫生间" },
]);

const last=ref([]);
const render=()=>{
index({
  map_id: 24
}).then((res)=>{
  console.log(res.data);
  last.value=[res.data[0].lng,res.data[0].lat];
  console.log(last.value[0],last.value[1]);
});
}
// 加载地图
window._AMapSecurityConfig = {
  securityJsCode: "ddd11d087206fa1a7a647c091447d93a",
};
const loadMap = () => {
  AMapLoader.load({
    key: "3ddf076e75cbcf3d8b87880e99d9f486",
    version: "2.0",
    plugins: ["AMap.Driving", "AMap.Marker", "AMap.InfoWindow"],
  }) 
    .then((AMap) => {
      // 初始化地图
      map.value = new AMap.Map("maps", {
        zoom: 12,
        center: [113.93, 35.3],
        showIndoorMap: false,
      });

      // 初始化驾车路线规划插件
      driving.value = new AMap.Driving({
        map: map.value,
        panel: null,
        policy: AMap.DrivingPolicy.LEAST_TIME,
      });

      // 添加默认标记点
      addDefaultMarker(AMap);

      // 规划从新乡市智慧岛到宝龙广场的路线
      planFixedRoute(AMap);
    })
    .catch((e) => {
      console.error("地图加载失败:", e);
    });
};

// 添加默认标记点
const addDefaultMarker = (AMap) => {
  // 新乡市智慧岛标记
  const startMarker = new AMap.Marker({
    position: [113.93, 35.3],
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    offset: new AMap.Pixel(-13, -30),
    title: "新乡市智慧岛",
  });

  // 宝龙广场标记
  const endMarker = new AMap.Marker({
    position: [last.value[0],last.value[1]],
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
    offset: new AMap.Pixel(-13, -30),
    title: "宝龙广场",
  });
  console.log(last);
console.log(Number(last._rawValue[0]),Number(last._rawValue[1]));


  map.value.add([startMarker, endMarker]);
};

// 规划固定路线
const planFixedRoute = (AMap) => {
  const startPoint = [113.93, 35.3]; 
  const endPoint = [last.value[0],last.value[1]];

  driving.value.search(startPoint, endPoint, (status, result) => {
    if (status === "complete") {
      if (result.routes && result.routes.length) {
        const route = result.routes[0];
        routeDistance.value = Math.round(route.distance / 1000);
        routeTime.value = Math.round((route.time / 3600) * 10) / 10;
        map.value.setFitView();
      }
    } else {
      console.error("路线规划失败:", result);
    }
  });
};

// 选择本地项目
const selectLocal = (index) => {
  activeLocalIndex.value = index;
  isShow.value = false; // 点击本地项目时关闭全部列表
};





// 点击展示更多
const showMore = () => {
  isShow.value = !isShow.value;
};

onMounted(() => {
  loadMap();
  render()
});
</script>



<style scoped>
#maps {
  width: 100%;
  height: 90vh;
}

/* 标题顶部导航栏 */
.map_title {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background: #fff;
  height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.map_title > p {
  margin-left: 25%;
}

/* 返回按键 */
.back_box {
  width: 15%;
  height: 50%;
  border: 1px solid #929292;
  border-radius: 50px;
  display: flex;
  align-items: center;
  padding: 1%;
  margin-left: 4%;
}

.back_box > img {
  width: 25px;
  height: 20px;
}

/* 地址列表 */
.localList {
  width: 100%;
  height: 40px;
  background: #fff;
  border-top: #929292 1px solid;
  margin-top: 40px;
  display: flex;
  align-items: center;
}

.localList > img {
  width: 25px;
  margin-left: 20%;
}

.localtionName {
  width: 70%;
  display: flex;
}

.local_items {
  width: 25%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  cursor: pointer;
}

.local_items > span {
  width: 35%;
  height: 2px;
  background: #2a82e4;
  margin-top: 2px;
}

/* 点击更多展示全部 */
.Alllocals {
  width: 100%;
  background-color: #fff;
  position: absolute;
  top: 7%;
  z-index: 66;
}

.Alllocals_title {
  padding: 1% 4%;
  width: 92%;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
}

.Alllocals_title > img {
  width: 23px;
}

/* 景点地点 */
.localsItems {
  width: 100%;
  background-color: #fff;
  display: flex;
  font-size: 14px;
  padding-bottom: 6px;
}

.localsItems > div {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}

.localsItems > div > img {
  width: 40px;
}

/* 地图功能按钮 */
.map_fn {
  display: none;
}

/* 路线信息 */
.route-info {
  position: absolute;
  bottom: 80px;
  left: 10px;
  right: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 50;
}
</style>
